<template>
	<div class="roadAnalysis-main">
		<i class="el-icon-close" @click="close"> </i>
		<input type="button" class="btn" id="default" value="开启面积测量" style="color: white" @click="initArea" />
		<input type="button" class="btn" id="default" value="关闭面积测量" style="color: white" @click="deleteArea" />
	</div>
</template>

<script>
import { setCenterAndZoom } from '@/gdMap/index'
// import BJMath from '@/gdMap/mathUtil'
import MeasureAreaTool from '@/gdMap/measureAreaUtil'
export default {
	name: 'RoadAnalysis',
	data() {
		return {}
	},
	computed: {},
	mounted() {
		// if (document.getElementById('infoBox-warn-1') && document.getElementById('infoBox-warn-1').style) {
		// 	document.getElementById('infoBox-warn-1').style.display = 'none'
		// }
		this.$nextTick(() => {
			// setCenterAndZoom(119.208811, 36.454259, 13)
			setCenterAndZoom(119.208811, 36.454259, 13)
			this.initArea()
		})
	},
	methods: {
		initArea() {
			this.measureAreaTool = new MeasureAreaTool(window.gdMap)
			this.measureAreaTool.measureArea()
		},
		deleteArea() {
			MeasureAreaTool.clearMarker()
		},
		close() {
			this.$store.dispatch('app/set_curMapSdk_fun', 'cesium')
			this.$store.dispatch('app/set_showTools_fun', true)
			this.$store.dispatch('app/set_showArea_fun', false)
		}
	}
}
</script>

<style lang="scss" scoped>
#a {
	width: 100%;
	height: 100%;
}
.roadAnalysis-main {
	position: absolute;
	right: pxTorem(356);
	z-index: 1;
	width: 400px;
	height: 200px;
	bottom: 50px;
	// background: rgba(24, 31, 40, 0.6);
	color: #fff;
	/deep/ .amap-overlay-text-container {
		background: pink;
	}
}
</style>